@import "../../../app.less";

.home {
  .container {
    width: 750rpx;

    // height: 688rpx;
    .top {
      background-color: @color-white;
    }


    .hearder {
      margin: 31rpx 32rpx 32rpx 32rpx;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      background-color: @color-white;

      // height: 568rpx;
      .hearder-right {
        width: 72rpx;
        height: 72rpx;
        background-color: @color-primary;
        border-radius: 50%;
        text-align: center;
        color: @color-white;
        line-height: 72rpx;
      }
    }

    .card {
      width: 686rpx;
      height: 321rpx;
      color: @color-white;
      margin: 0rpx 32rpx 48rpx 32rpx;

      .card-img {
        // background-image: url("https://636c-cloud1-6gqot0bt9a0a7a5a-1308813126.tcb.qcloud.la/bg_jinxingzhong%403x.png?sign=3479edbc835518d24dc6fb84e4b27fc2&t=1647327160");
        // background-size: 100% 100%; 
        padding: 40rpx 40rpx 71rpx 40rpx;
        box-sizing: border-box;
        position: relative;

        .bgimg {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;

          .bj {
            width: 100%;
            height: 100%;
          }
        }
      }

      .card-top {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 2;

        text {
          color: @color-white;
          font-size: 36rpx;
          font-weight: 600;

          &.num {
            font-size: 100rpx;
            font-weight: bold;
            font-family: Arial;
          }
        }
      }

      .van-divider {
        margin: 28rpx 0;
        opacity: 0.2;
      }

      .card-conten {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        position: relative;
        z-index: 2;

        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          text {
            font-size: 36rpx;
            color: @color-white;
          }

          view {
            font-size: 26rpx;
            color: rgba(255, 255, 255, .9);
          }
        }


      }




    }

    .notice {
      box-sizing: border-box;
      padding: 16rpx 32rpx;
      display: flex;
      border-radius: 20rpx 20rpx 0 0;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(to bottom, rgba(0, 65, 196, .07) 0%, rgba(22, 68, 189, .07) 100%);
      margin-bottom: 20rpx;

      &>view {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .topic {
        font-weight: 32rpx;
        color: @color-primary;
        font-weight: bold;
      }

      .line {
        width: 2rpx;
        height: 26rpx;
        background: #959DAC;
        margin: 0 24rpx;
      }

      .info {
        color: @color-text-primary;
        font-size: 28rpx;
        width: 400rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  .projectList {
    padding: 0 32rpx;

    .title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      width: 100%;
      padding: 36rpx 0 34rpx;

      .name {
        display: flex;
        flex-direction: row;
        align-items: center;

        image {
          width: 50rpx;
          height: 50rpx;
          margin-right: 14rpx;
        }

        text {
          color: @color-text-primary;
          font-size: 36rpx;
        }
      }

      .more {
        display: flex;
        flex-direction: row;
        align-items: center;

        text {
          color: @color-text-fifthly;
          font-size: 26rpx;

        }

        .van-icon-arrow {
          color: @color-text-secondary;
        }
      }

    }
  }

  .tip {
    color: @color-text-secondary;
    width: 100%;
    font-size: 26rpx;
    line-height: 100rpx;
    text-align: center;
  }
}